<template>
  <div class="wl-page wl-flexview"
       :class="{'background-color-my':userBg}">
    <div class="wl-scrollview">
      <router-view></router-view>
    </div>
    <!-- <van-tabbar v-model="active"
                class="wl-tabbar"
                :fixed="false"
                @change="tabChange">
                       to="/home_page">首页</van-tabbar-item>
      <van-tabbar-item v-if="!type"
                       icon="thumb-circle-o"
                       to="/work_bench">工作台</van-tabbar-item>
      <van-tabbar-item v-if="!type"
                       icon="thumb-circle-o"
                       to="/separateservice">收受分离</van-tabbar-item>
      <van-tabbar-item icon="user-o"
                       to="/work_bench">我的</van-tabbar-item>
    </van-tabbar> -->
  </div>
</template>
<script>
// import { mLogin } from '@/api/user'
// import { getUrlForNologin } from '@/api/iteminfo'
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      active: 0,
      userBg: false,
      overlayShow: false,
      type: false
    }
  },
  mounted () {
    let ua = window.navigator.userAgent.toLowerCase()
    // 通过正则表达式匹配ua中是否含有MicroMessenger字符串
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      this.type = true
    } else {
      this.type = false
    }
    if (this.$common.xeUtils.locat().host !== 'shengst.tripln.top' && this.$common.xeUtils.locat().host !== 'wanglanglang.tripln.top') {
      // mLogin().then(ret => {
      //   console.log(ret, '模拟登录接口')
      // })
      // getUrlForNologin().then(ret => {
      //   console.log(ret, '调用登录接口')
      //   // if (ret.data.errcode === 0) {
      //   //   aaa(ret.data.data.url, {}).then(ret => {
      //   //     console.log(ret, '222')
      //   //   })
      //   // }
      // })
    }
    this.isNavBarShowIndexAction(this.$route.path)
  },
  computed: {
    menuState () {
      return this.active
    },
    isShow () {
      return this.$store.state.app.navBarShow
    }
  },
  methods: {
    ...mapActions([
      'setNavIndex',
      'setNavBarShow'
    ]),
    tabChange (index) {
      this.setNavIndex(index)
      console.log(index)
    },
    isNavBarShowIndexAction (path) {
      let navBarList = [
        ['/city-card-index-v4'],
        ['/gov-index-v2', '/gov-two-level-page', '/gov-marriage', '/epidemic-remote-inquiry', '/gov-more-list'],
        ['/mine-index-v2', '/mine-subsidy', '/city-card-discounts-shop-list', '/mine-complaint-list', '/mine-about-me', '/mine-business-cooperation', '/complaint-suggestion', '/my-customer-service']
      ]
      let show = false
      navBarList.forEach((item, index) => {
        if (this.$common.xeUtils.includes(item, path)) {
          this.active = index
          this.setNavIndex(index)
          show = true
        }
      })
      this.setNavBarShow(show)
    }
  },
  watch: {
    $route (to) {
      this.isNavBarShowIndexAction(to.path)
    }
  }
}
</script>
<style>
@import '../assets/common.css';
@import '../assets/icons/iconfont.css';

.wl-page {
  background-color: white;
  height: 100%;
}

.background-color-my {
  background-color: #f5f5f5;
}

/*富文本样式展示*/
.wl-html {
  width: 100%;
}

.wl-html img {
  width: 100%;
}

.wl-html p {
  padding: 0;
  margin: 0;
}

.wl-html h6 {
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: inherit;
  text-indent: 2em;
  line-height: 1.5rem;
}

.wl-html h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-start: unset;
  margin-block-end: unset;
}

.van-hairline--top::after {
  border-color: #d2d2d2 !important;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block-container {
  width: 70%;
}

.block-container-inner {
  height: 100%;
  text-align: center;
  border-radius: 5px;
  border: 5px solid rgba(68, 110, 143, 0.62);
  margin: 5px;
  background-color: rgba(68, 110, 143, 0.62);
}

.block-container-top {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background-image: linear-gradient(
    #82c1f1,
    #73b6e9,
    #5ba1d9,
    #478dc9,
    #3b80bf
  );
  height: 150px;
  padding: 20px 10px;
  color: white;
}

.block-container-top p {
  font-size: 20px;
  font-weight: 500;
  margin: 10px;
}

.block-container-top p:first-child {
  font-size: 22px;
}

.block-container-bottom {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  padding: 5px;
  font-size: 20px;
  color: #186cb0;
  cursor: pointer;
  background-color: white;
}

.block-container-bottom p {
  margin: 0px;
  padding: 10px;
}

.connect-line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -10px;
  /*height: 30px;*/
  /*border: 2px solid white;*/
  /*width: 0px;*/
}

.connect-line div {
  height: 50px;
  border: 1px solid white;
  width: 0px;
}

.close-container {
  /*margin-top: 20px;*/
  text-align: center;
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.close-inner {
  width: 20px;
  height: 20px;
  border-radius: 50px;
  border: 2px solid white;
  padding: 5px;
  cursor: pointer;
}
</style>
